import { Popover } from 'antd';
import { useNavigate } from 'react-router-dom';
import CommonGoodsImg from '@/components/CommonGoodsImg';
import CommonTag from '@/components/CommonTag';
import TableRender from '@/components/TableRender';
import '../../index.less';

const transTypeMap = {
  1: '营销费用',
  2: '充值',
  3: '提现',
  4: '下单付款',
  5: '运费差价',
  6: '拿货付款',
  7: '客服拆单',
  8: '添加商品',
  9: '订单退款',
  10: '拿货退货',
  11: '退款工单',
  12: '拿货改价',
  13: '更换商品',
  14: '手续费',
  15: '包材费用',
  16: '线下充值',
  17: '挂账',
  18: '包材退款',
  // '19': '营销费用',
  20: '人工处理',
  21: '更换包装',
  22: '作废',
  23: '返审核',
  24: '手续费补助',
  25: '仓储服务费',
  27: '仓内拆单',
  26: '账期还款',
  28: '采购付款',
  29: '采购作废',
  30: '采购退款',
  33: '拆分装箱',
  34: '线下备货',
  35: '取消线下备货',
  36: '财审结算',
  37: '无采购入库',
};

const orderTypeMap = {
  2: '供应商直发',
  6: '自发拿货',
  7: '三方代发',
};

const PeriodList = ({ data, type, handleCancel, orderStatus, pagination, changePages }) => {
	const navigate = useNavigate();

  const goOrder = (record) => {
    handleCancel();
    if (record.transType == '9') {
      navigate('/trade/refund', {
				state: {
					orderSn: record.orderSn,
				}
      });
    } else if (record.transType == '26' || record.transType == '42') {
      navigate(
        `/account/balance?payOrder=${record.orderSn}`
      );
    } else if (record.transType == '28') {
        if(record.orderSn.startsWith('M')) {
          navigate(`/views/order/list?orderSn=${record.orderSn}`)
        } else {
          navigate(`/views/purchase/PurchaseOrder?purchaseNo=${record.orderSn}`);
        }
    } else {
      navigate('/views/order/list', {
				state: {
					orderSn: record.orderSn,
					orderType: record.orderType == '2' ? record.orderType : undefined,
				}
      });
    }
  };

  const columns1 = [
    {
      title: '流水单号',
      code: 'tradeNo',
      width: 150,
    },
    {
      title: '关联单号',
      code: 'orderSn',
      width: 200,
      render: (text, record) => {
        return <a onClick={() => goOrder(record)}>{text}</a>;
      },
    },
    {
      title: '订单类型',
      code: 'orderTypeName',
      width: 100,
      // render: (text) => {
      //   return <span>{orderTypeMap[text]}</span>;
      // },
    },
    {
      title: '支付环节',
      code: 'transTypeComment',
      width: 100,
      //   render: (text) => {
      //     return <span>{transTypeMap[text]}</span>;
      //   },
    },
    {
      title: '支付时间',
      code: 'payTime',
      width: 150,
    },
  ];

  const columns2 = [
    {
      title: '商品名称',
      code: 'goodsName',
      width: 280,
      render: (text, record) => {
        return (
          <div>
            {record.transType == '26' ? (
              ''
            ) : (
              <div className="img-flex">
                {record.transType && (record.transType != 42 && record.transType != 20) && (
                  <div className="goodsimg">
                    <div
                      style={{
                        height: '100%',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                      }}
                    >
                      <CommonGoodsImg
                        img={record.goodsImage}
                        storeId={record.storeId}
                        goodsId={record.skuId}
                        size="48x48"
                        width="48"
                      />
                    </div>
                  </div>
                )}
                <div style={{ flex: 1 }}>
                  <Popover
                    content={
                      <div>
                        <div className="textOverflowMultiTwo">{text}</div>
                        <div className="textOverflowMultiOne">
                          {record.goodsSpec}
                        </div>
                      </div>
                    }
                  >
                    <span>
                      <div className="textOverflowMultiTwo">{text}</div>
                      <div className="textOverflowMultiOne">
                        {record.goodsSpec}
                      </div>
                    </span>
                  </Popover>
                  <div>
                    {record.transType && (record.transType != 42 && record.transType != 20) && (
                      <>
                        <span>商品编码：</span>
                        <span>{record.goodsCode}</span>
                      </>
                    )}
                    {record.billType == 1 && (
                      <div>
                        <CommonTag type="zhihuannahuo" />
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}
          </div>
        );
      },
    },
    {
      title: '单价',
      code: 'goodsPrice',
      width: 80,
      render: (text, record) => {
        return (
          <div>
            <span>{text}</span>
            {record.vipPriceMark == '1' ? (
              <Popover content="会员价">
                <span className="sign-box">会</span>
              </Popover>
            ) : (
              ''
            )}
          </div>
        );
      },
    },
    {
      title: '数量',
      code: 'goodsNum',
      width: 80,
    },
    {
      title: '收支金额',
      code: 'amount',
      width: 100,
      render: (text, record) => {
        return (
          <div>
            {record.payType == '1' ? (
              <span className="pay-get">+{text}</span>
            ) : (
              <span className="pay-put">{text}</span>
            )}
          </div>
        );
      },
    },
  ];

  const renderColumns = () => {
    let columns = [...columns1, ...columns2];
    if (type == 2 && orderStatus == '2') {
      columns = [
        ...columns,
        {
          title: '入账时间',
          code: 'relianceTime',
          width: 150,
        },
      ];
    }
    return columns;
  };

  // 详情table的props
  const tableRenderProps = {
    data,
    columns: renderColumns(),
    pageConfig: {
      pagination,
      handlePageSize(page, size) {
        changePages(page,size);
      }
    },
    style: {
      height: `calc(100vh - 554px)`
    },
  }

  return <TableRender { ...tableRenderProps } />
};

export default PeriodList;
